<template>
    <div v-if="dataInfo.length" style="display: flex;flex-direction: column;">
        <div style="min-height: 300px;" v-for="receipt in dataInfo" :key="receipt.id" v-loading="receipt.loading">
            <div class="receipt-header">
                <div style="display:flex;align-items: center;">
                    <el-text class="receipt-info-title"><h3>|&nbsp;&nbsp;发票号码</h3></el-text>
                    <el-text>{{ receipt.no }}</el-text>
                </div>
                <div style="display:flex;align-items: center">
                    <el-text class="receipt-info-title"><h3>|&nbsp;&nbsp;发票名称</h3></el-text>
                    <el-text >{{ decodeURI(receipt.img.slice(receipt.img.lastIndexOf("/") + 1)) }}</el-text>
                </div>
                <div style="display:flex;align-items: center">
                    <el-text class="receipt-info-title"><h3>|&nbsp;&nbsp;发票总价</h3></el-text>
                    <el-text>{{ receipt.totalPrice }}元</el-text>
                </div>
                <div style="display:flex;align-items: center">
                    <el-text class="receipt-info-title"><h3>|&nbsp;&nbsp;报销额度</h3></el-text>
                    <el-text>{{ receipt.reimburse }}元</el-text>
                </div>
            </div>
            <el-divider border-style="dashed" style="margin: 1rem 0"/>
            <div style="min-height: 25em" v-loading="receipt.loading">
                <vue-office-pdf v-if="receipt.isPdf" :src="receipt.img"
                                @rendered="handleRenderedPdf(receipt)"/>
                <el-image v-else :src="receipt.img" @load="receipt.loading = false"/>
            </div>
            <el-divider style="margin: 1rem 0"><el-icon><StarFilled/></el-icon></el-divider>
        </div>
    </div>
    <el-empty v-else :image-size="200"/>
</template>

<script setup>
import {ref} from "vue";
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
import {StarFilled} from "@element-plus/icons-vue";

defineProps(["dataInfo"])
const show = ref(false)
const handleRenderedPdf = receipt => {
    document.querySelectorAll('.vue-office-pdf').forEach(value => value.style.overflow = "visible")
    const pdfDom = document.querySelectorAll('.vue-office-pdf-wrapper')
    pdfDom.forEach(value => {
        value.style.background = "#fff"
        value.style.padding = "30px 0"
    })
    receipt.loading = false
}
const handleError = () => {
    ElMessage.error("发票文件加载失败,请稍后再试")
}
</script>

<style scoped lang="scss">
.receipt-header {
    padding: 0.5em 1em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    .receipt-info-title{
        margin-right: 1rem;
        h3{
            width: 85px;
        }
    }
}
</style>